import React from "react";
import { Form, Input, Select, Button, Space, Flex, Tabs } from "antd";
import { itemType } from "@/enums/formItemType";
import { forwardRef, useImperativeHandle } from "react";

type FieldType = {
  name: string;
  label: string;
  itemType?: string;
  rules?: any[];
  dataSource?: any[];
  fallback?: Function;
};
interface SFConfigType {
  formItems: FieldType[];
  initialState?: Object;
  isShowReset?: boolean;
  requestFunc: Function;
  children?: React.ReactNode;
  rightBtns?: React.ReactNode;
}

const SearchForm: React.FC<SFConfigType> = forwardRef((props: SFConfigType, ref) => {
  useImperativeHandle(ref, ()=>{
    return {}
  }, [])
  const [form] = Form.useForm();
  const { formItems } = props;
  const onFinish = (values: any) => {
    props.requestFunc(values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  const resetForm = () => form.resetFields();
  //是否右侧？
  const justify = props.children ? "space-between" : "start";
  const flex = "2";

  return (
    <Form
      name="basic"
      form={form}
      layout={"inline"}
      wrapperCol={{ span: 16 }}
      style={{ width: "100%" }}
      initialValues={props.initialState}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Flex justify={justify} flex={flex} style={{ width: "100%" }}>
        {props.children && <Flex className="SearchFormLeft">{props.children}</Flex>}
        <Flex
          className="SearchRight"
          justify={justify}
          align="center"
          style={{
            width: props.children ? "auto" : "100%",
            margin: "auto 0 auto auto"
          }}
        >
          {formItems.map(item => {
            return (
              <Form.Item key={item.name} name={item.name} label={item.label} rules={item.rules}>
                <Input />
              </Form.Item>
            );
          })}
          <Flex gap="middle">
            <Form.Item>
              <Space>
                {props.isShowReset && (
                  <Button htmlType="button" onClick={resetForm}>
                    重置
                  </Button>
                )}
                <Button type="primary" htmlType="submit" key="submitButton">
                  搜索
                </Button>
                {props.rightBtns}
              </Space>
            </Form.Item>
          </Flex>
        </Flex>
      </Flex>
    </Form>
  );
});

export default SearchForm;
